<template>
  <div class="case">
   
    <!-- 上 -->
    <div class="case-middle">
      <div class="case-middle-box">
        <div class="case-middle-box-title">
          <div
            class="case-middle-box-title-immortal"
            @click="immortalChange(1)"
            :style="immortal===1? ' color: #3c7cd8;':'' "
          >
            真人对应数字分身
            <div v-show="immortal===1" class="case-middle-box-title-immortal-decoration"></div>
          </div>
          <div
            class="case-middle-box-title-NOimmortal"
            @click="immortalChange(2)"
            :style="immortal===2? ' color: #3c7cd8;':'' "
          >
            无真人对应数字形象
            <div v-show="immortal===2" class="case-middle-box-title-NOimmortal-decoration"></div>
          </div>
        </div>
        <div class="case-banner">
          <el-carousel :interval="5000" arrow="never" height="440px" indicator-position="none">
            <el-carousel-item
              v-for="(item,index) in num"
              :key="index"
              style="display: flex; justify-content:center;"
            >
              <div
                class="case-banner-box"
                v-for="(item2,index2) in pageVal['item' + item]"
                :key="index2"
                :style="pageVal['item' + item].length-1==index2?'margin-right: 0px;':'margin-right: 30px;'"
              >
                <div class="case-banner-box-img">
                  <img :src="item2.cover" alt width="100%" />
                </div>
                <div class="case-banner-box-name">{{ item2.name }}</div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <!-- 中 -->
    <div class="case-display">
      <div class="case-display-box">
        <img :src="image" width="100%" alt />
      </div>
    </div>
     <!-- 下 -->
     <div class="case-title">
      <div class="case-title-box">
        <div class="case-title-box-casket">
          <div class="case-title-box-item" v-for="(item,index) in nameList" :key="index">
            <div class="case-title-box-item-name">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { homecasea, casesImg } from "@/utils/api";
export default {
  data() {
    return {
      immortal: 1, //真人对应数字分身
      imgs: [
        {
          url: require("../../images/case-cs.png")
        },
        {
          url: require("../../images/case-cs.png")
        },
        {
          url: require("../../images/case-cs.png")
        },
        {
          url: require("../../images/case-cs.png")
        },
        {
          url: require("../../images/case-cs.png")
        },
        {
          url: require("../../images/case-cs.png")
        }
      ],
      image: "", //底部图片
      imgList: [], //图片列表
      nameList: [], //名称列表
      pageVal: [], //轮播图片
      num: ""
    };
  },
  created() {
    this.init();
    this.initImg();
  },
  methods: {
    init() {
      homecasea({}, res => {
        if (res.code === 200) {
          this.image = res.data.image;
          this.nameList = res.data.nameList;
        }
      });
    },
    initImg() {
      casesImg({ classId: this.immortal }, res => {
        this.imgList = res.data;
        this.num = Math.ceil(this.imgList.length / 6);
        for (var i = 1; i <= this.num; i++) {
          var arr = [];
          for (var index = 0; index < this.imgList.length; index++) {
            if ((i - 1) * 6 <= index && index < i * 6) {
              arr.push(res.data[index]);
            }
          }

          this.pageVal["item" + i] = arr;
        }
        this.$forceUpdate(); //强制刷新当前页面
        console.log(this.pageVal);
      });
    },
    //真人对应数字分身
    immortalChange(val) {
      this.immortal = val;
      this.initImg();
    }
  }
};
</script>

<style scoped lang="scss">
.case {
  min-height: calc(100vh - 486px);
  background-color: rgb(255, 255, 255);
  &-title {
    width: 100%;
    height: 552px;
    background: url("../../images/case-bg1.png");
    background-size: 100% 100%;
    &-box {
      min-width: 1440px;
      max-width: 1920px;
      height: 100%;
      // outline: 1px solid red;
      margin: 0 auto;
      padding: 120px 0 100px;
      &-casket {
        width: 1340px;
        margin: 0 auto;
        // border: 1px solid red;
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-between;
      }

      &-item {
        width: 242px;
        height: 151px;
        // border: 1px solid blue;
        margin-right: 30px;
        margin-bottom: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url("../../images/case-bg2.png");
        background-size: 100% 100%;

        &-name {
          width: 135px;
          height: 49px;
          font-size: 18px;
          margin: auto;
          font-weight: 500;
          color: #333333;
          text-align: center;
          // border: 1px solid blue;
          display: flex;
          align-items: center;
          justify-content: center;
          line-height: 30px;
        }
      }
      &-item:nth-child(5n) {
        // border: 1px solid red;
        margin-right: 0px;
      }
    }
  }
  &-middle {
    width: 100%;
    height: 676px;
    background: url("../../images/case-bg3.png");
    background-size: 100% 100%;
    &-box {
      width: 1328px;
      height: 676px;
      // outline: 2px solid red;
      margin: 0 auto;
      padding-top: 80px;
      &-title {
        width: 100%;
        // outline: 1px solid blue;
        font-size: 18px;
        font-weight: 500;
        color: #333333;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 32px;
        border-bottom: 1px solid #ffffff;
        &-immortal {
          margin-right: 230px;
          position: relative;

          cursor: pointer;
          &-decoration {
            width: 30px;
            height: 3px;
            background-color: #3c7cd8;
            border-radius: 1.5px;
            position: absolute;
            bottom: -33px;
            left: 40%;
          }
        }
        &-NOimmortal {
          position: relative;
          cursor: pointer;
          &-decoration {
            width: 30px;
            height: 3px;
            background-color: #3c7cd8;
            border-radius: 1.5px;
            position: absolute;
            bottom: -33px;
            left: 45%;
          }
        }
      }
    }
  }
  &-banner {
    // outline: 1px solid red;
    margin-top: 30px;

    &-box {
      width: 198px;
      margin-right: 30px;
      // outline: 1px solid rgb(255, 26, 26);

      &-img {
        width: 100%;
        height: 385px;
        padding: 10px;
        overflow: hidden;
        border: 2px solid #ffffff;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.3);
      }
      &-name {
        width: 100%;
        text-align: center;
        margin-top: 18px;
        font-size: 16px;
        font-weight: 500;
        color: #3c7cd8;
      }
    }
    &-box:nth-child(6n) {
      // border: 1px solid red;
      margin-right: 0px;
    }
  }
  &-display {
    width: 100%;
    padding: 112px 0 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f7faff;
    &-box {
      width: 1400px;
      overflow: hidden;
    }
  }
}
</style>

